<template>
  <div class="con_store_main">
    <div>
      <div v-if="brandBox">
        <div>
          <el-button style="margin-left: 20px;margin-right: 10px;" @click="toggleIcon" :icon="currentIcon"
            circle></el-button>
          <el-button @click="updateRate">校正利润</el-button>
          <el-button @click="openBrand">查看品牌统计</el-button>
        </div>
        <div class="con-cost">
          <div class="drops">
            <div class="container">
              <div class="drop" style="--clr: #ff0f5b">
                <div class="content-profit">
                  <div>销售额：{{ this.saleRevenue }}元</div>
                  <div>进货成本：{{ this.costOfGoods }}元</div>
                  <div>利润：{{ this.profit }}元</div>
                  <div>盈余：{{ this.grossMarginRate }}%</div>
                </div>
              </div>
            </div>
          </div>
          <e-charts class="chart" :option="option" />
        </div>
      </div>
      <div v-else style="display: flex;flex-direction: row;">
        <div>
          <el-button @click="back">返回</el-button>
        </div>
        <el-table class="table" :data="supplyData" style="width: 100%" v-loading="loading"
          :default-sort="{ prop: 'index', order: 'descending' }">
          <el-table-column type="index" label="序号" sortable width="100">
          </el-table-column>
          <el-table-column prop="brand" label="品牌" width="100">
          </el-table-column>
          <el-table-column prop="inventory" label="剩余库存" width="100">
          </el-table-column>
          <el-table-column prop="supplyTotal" label="进货成本" width="120">
          </el-table-column>
        </el-table>
        <el-table class="table" :data="saleData" style="width: 100%" v-loading="loading"
          :default-sort="{ prop: 'index', order: 'descending' }">
          <el-table-column type="index" label="序号" sortable width="100">
          </el-table-column>
          <el-table-column prop="brand" label="品牌" width="100">
          </el-table-column>
          <el-table-column prop="saleTotal" label="销售额" width="120">
          </el-table-column>
        </el-table>

      </div>

    </div>

  </div>
</template>
<script>
import { request } from "@/network/request/request";
export default {
  mounted() {
    this.findData();
    this.getCostByBrand();
    this.updateRate();
  },
  data() {
    return {
      currentPage: 1, // 当前页码
      pageSize: 6, // 每页显示的记录数
      total: 0, // 总数目，默认设置为 0
      saleRevenue: 0,
      costOfGoods: 0,
      profit: 0,
      grossMarginRate: 0,
      pieData: [],
      // 初始图标  
      currentIcon: 'el-icon-refresh',
      // 用于防止在短时间内多次点击导致的多次计时器  
      timer: null,
      value: false,
      saleData: [],
      supplyData: [],
      loading: false,
      brandBox: true,
      option: {
        title: {
          text: "盈余明细",
          left: "center",
          top: "center",
        },
        xAxis: {
          type: 'category',
          data: ["销售额", "进货成本", "利润"],
        },
        yAxis: {
          type: 'value'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: "25",
            fontWeight: "bold",
          },
        },
        series: [
          {
            type: 'bar',
            data: [],
          },
        ],
      },
    };
  },
  methods: {
    toggleIcon() {
      // 如果已经存在计时器，先清除它  
      if (this.timer) {
        clearTimeout(this.timer);
        this.$message.error("点击太快了，请稍后再试")
      }
      this.findData();
      // 立即设置新的图标（可选，取决于你的需求）  
      this.currentIcon = 'el-icon-loading'; // 或者其他你想要的图标  
      // 1秒后切换回原始图标  
      this.timer = setTimeout(() => {
        this.currentIcon = 'el-icon-refresh';
        // 清除计时器  
        this.timer = null;
      }, 400);
      this.findData();
      this.$message.success("刷新成功");
    },
    openBrand() {
      this.getCostByBrand();
      this.findData();
      this.brandBox = false;
    },
    back() {
      this.brandBox = true;
      this.findData();
    },
    async findData() {
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const params = {
        storeId: localStorage.getItem("storeId"),
      };
      const config = {
        url: "api/user/cost",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.option.series[0].data = res.data.data.list; /* 得到数据 */
        this.saleRevenue = res.data.data.salesRevenue;
        this.profit = res.data.data.profit;
        this.costOfGoods = res.data.data.costOfGoods;
        this.grossMarginRate = res.data.data.grossMarginRateL;
      }
      this.getCostByBrand();
    },
    handleSizeChange() {
      this.findData();
      this.getCostByBrand();
    },
    async updateRate() {
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const config = {
        url: "api/user/cost/rate",
        method: "put",
        data: {
          storeId: localStorage.getItem("storeId")
        }
      }
      const res = await request(config);
      if (res.data.code == 1) {
        this.$message.success("校正成功");
        this.findData();
        this.getCostByBrand();
      }
    },
    async getCostByBrand() {
      const storeId = localStorage.getItem("storeId");
      if (storeId == 0) {
        this.$message.error("无店铺数据！");
        return;
      }
      const params = {
        storeId: localStorage.getItem("storeId"),
      };
      const config = {
        url: "api/user/cost/category",
        method: "get",
        params: params,
      };
      const res = await request(config);
      if (res.data.code === 1) {
        this.saleData = res.data.data.costSale;
        this.supplyData = res.data.data.costSupply;
      }
    },
  },
}; 
</script>
<style scoped>
.con_store_main {
  height: 498px;
  display: flex;
  flex-direction: column;
  align-content: center;
  justify-content: center;
}

.con-cost {
  display: flex;
  flex-direction: row;
}

.chart {
  height: 380px;
  margin-right: 150px;
}

.container .drop {
  position: relative;
  margin-top: 25px;
  width: 200px;
  height: 200px;
  box-shadow: inset 20px 20px 20px rgba(0, 0, 0, 0.05),
    25px 25px 20px rgba(0, 0, 0, 0.05), 25px 30px 30px rgba(0, 0, 0, 0.05),
    inset -20px -20px 25px rgba(255, 255, 255, 0.9);
  /* transition: 0.5s ease-in-out; */
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

/* .container .drop:nth-child(1) {
  /* border-radius: 33% 67% 54% 46% / 30% 32% 68% 70%; */
  /* border-radius: 0% 100% 100% 0% / 100% 0% 100% 0%  */
/* }  */
/* 
.container .drop:hover {
  border-radius: 50%;
} */

.content-profit {
  color: black;
}

.container .drop::before {
  content: "";
  position: absolute;
  top: 26px;
  left: 28px;
  width: 20px;
  height: 20px;
  background-color: #fff;
  border-radius: 50%;
  opacity: 0.8;
}
</style>